<template>
  <div style="background-color: #FFFFFF; width: 100%; height: 100%; padding: 15px;">
    <a-spin :spinning="loading">
      <div style="margin-left: 26px; font-size: 13px; font-weight: bold;">
        <span>品种电耗</span>
      </div>
      <div style="margin-left: 20px;margin-top: 20px; padding:5px">
        <a-row :gutter="16">
          <a-col :span="6">
            <j-dict-select-tag
              style="width: 100%"
              placeholder="请选择公司"
              v-model="selectQuery.company"
              dictCode="crm_company,name,id"
              disabled
            />
          </a-col>
          <a-col :span="6">
            <j-dict-select-tag
              style="width: 100%"
              placeholder="请选择车间"
              v-model="selectQuery.workshop"
              dictCode="workshop"
            />
          </a-col>
          <a-col :span="6">
            <j-dict-select-tag
              style="width: 100%"
              placeholder="请选择工序"
              v-model="selectQuery.productCategory"
              dictCode="product_category"
            />
          </a-col>
          <a-col :span="6">
            <a-select
              style="width: 100%"
              placeholder="请选择机台"
              v-model="selectQuery.deviceNo"
              :key="selectQuery.productCategory"
            >
              <a-select-option v-for="(item,index) in deviceList" :key="index" :value="item.deviceNo">
                {{ item.workingProcedure_dictText }}{{ item.deviceNo }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="14">
            <RangePicker v-model="queryTime" @change="onChange"></RangePicker>
          </a-col>
          <a-col :span="2">
            <a-button @click="onSearch" type="primary" style="margin-top: 10px">
              查询
            </a-button>
          </a-col>
        </a-row>
        <div>
          <div v-if="viewBarChart">
            <div id="tree"></div>
          </div>
          <div style="margin-top: 30px;">
            <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange">
              <a slot="name" slot-scope="text">{{ text }}</a>
            </a-table>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import RangePicker from '@/components/RangePicker/RangePicker.vue'

import { getAction } from '@api/manage'

const columns = [
  {
    title: '公司名称',
    dataIndex: 'company_dictText',
    key: 'company_dictText',
    align: 'center',
    width: 320
  },
  {
    title: '工序',
    dataIndex: 'productCategory_dictText',
    key: 'productCategory_dictText',
    align: 'center',
    width: 200
  },
  {
    title: '品种',
    dataIndex: 'productTypeTxt',
    key: 'productTypeTxt',
    align: 'center',
    width: 320
  },

  {
    title: '电耗(kw·h)',
    dataIndex: 'consumption',
    key: 'consumption',
    align: 'center',
    width: 200
  }
]

const data = [
  {
    key: '',
    serialNumber: '',
    productCategory_dictText: '',
    company_dictText: '',
    consumption: '',
    createTime: ''
  }
]
export default {
  name: 'energyCategory',
  components: { RangePicker },
  data() {
    return {
      data,
      columns,
      loading: false,
      viewBarChart: false,
      deviceList: [],
      optionTreeData: {},
      queryTime: null,
      selectQuery: {
        company: '1771136798305476610',
        deviceNo: undefined,
        endTime: undefined,
        productCategory: undefined,
        startTime: undefined,
        workshop: undefined,
        pageSize:10,
        pageNo: 1
      },
      /*
    * productCategory（细纱1；粗纱2；头并4；末并5；梳棉6；抓棉7；多仓8；精开棉9；络筒10；打包11）
      workingProcedure（清花1；梳棉2；并条4；粗纱5；细纱6；络筒7；打包8；）
      清花对应：抓棉、多仓、精开棉；并条对应：头并、末并
    * */
      workingProcedure: {
        // 细纱1 -> 细纱6
        1: 6,
        // 粗纱2 -> 粗纱5
        2: 5,
        // 抓棉7 -> 清花1
        7: 1,
        // 多仓8 -> 清花1
        8: 1,
        // 精开棉9 -> 清花1
        9: 1,
        // 头并4 -> 并条4
        4: 4,
        //末并5 -> 并条4
        5: 4,
        // 梳棉6  -> 梳棉2
        6: 2,
        // 络筒10  -> 络筒7
        10: 7,
        // 打包11 -> 打包8
        11: 8
      },
      // 分页配置
      pagination: { pageSize: 10 }
    }
  },
  watch: {
    'selectQuery.workshop'() {
      this.getDeviceList()
    },
    'selectQuery.productCategory'() {
      this.getDeviceList()
    },
    selectQuery: {
      handler() {
        const data = Object.keys(this.selectQuery)
        /* for (let i = 0; i < data.length; i++) {
          if (!this.selectQuery[data[i]]) {
            return
          }
        }*/
        this.onSearch()
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    getDeviceList() {
      this.selectQuery.deviceNo = undefined
      this.deviceList = []
      // 车间和工序都选才去查询
      if (!this.selectQuery.workshop || !this.selectQuery.productCategory) {
        return
      }
      const params = {
        workshop: this.selectQuery.workshop,
        workingProcedure: this.workingProcedure[this.selectQuery.productCategory]
      }
      getAction('/crm_device/crmDevice/list', params).then(res => {
        this.deviceList = res.result.records
      })
    },

    handleRadioChange() {
      this.$nextTick(() => {
        this.selectQuery.startTime = this.date[0]
        this.selectQuery.endTime = this.date[1]
      })
    },
    onSearch() {
      this.data=[]
      this.loading = true
      this.viewBarChart = true
      getAction('/zjc_consumption/zjcConsumption/energyManageVarietyElectricityConsumption', this.selectQuery).then(
        res => {
          const { total, records } = res.result
          this.data = records
          this.pagination = { ...this.pagination, total }

          this.getTreeData()
          this.loading = false
        }
      )
    },
    handleTableChange(pagination) {
      this.selectQuery.pageNo = pagination.current
      this.onSearch()
    },
    getTreeData() {
      var myChart = echarts.init(document.getElementById('tree'))
      this.optionTreeData = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += '<br/>' + params[i].marker + params[i].value + 'kw·h'
            }
            return relVal
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // data: ['清花', '梳棉', '并条', '粗纱', '细纱', '络筒', '打包'],
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位:kw·h'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '10%',
            data: []
          }
        ]
      }
      const echartData = [];
      for (let i = 0; i < this.data.length; i++) {
        if(i>=(this.selectQuery.pageNo-1)*10&&i<this.selectQuery.pageNo*10&& this.data[i]!==undefined){
          echartData.push(this.data[i]);
        }
      }
      this.optionTreeData.xAxis[0].data =echartData.map(item => item.productCategory_dictText)
      this.optionTreeData.series[0].data = echartData.map(item => item.consumption)

      // 打印转换后的 label 数组
      myChart.setOption(this.optionTreeData)
    },
    onChange() {
      this.selectQuery.startTime = this.queryTime[0]
      this.selectQuery.endTime = this.queryTime[1]
    }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose()
    }
  }
}
</script>
<style lang="less" scoped>
#tree {
  width: 100%;
  height: 200px;
  margin-left: -30px;
}

#squareMachine {
  margin-right: 10px;
  margin-top: 10px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  padding: 10px 15px;
}
::v-deep .ant-col-3 {
  width: 10.5%;
}
/deep/ .ant-col-6 {
  width: 21.7%;
}
</style>
